<template>
  <el-dialog
    v-dialogDrag
    class="dialog-module"
    title="添加模块"
    v-model:visible="dialogVisible"
    width="1100px"
    @close="dialogClose"
  >
    <template v-slot:title>
      添加模块
      <span class="subtitle">（已选{{ chosenLength }}/6）</span>
    </template>
    <div class="content">
      <div class="left">
        <ul class="list-tab">
          <li
            v-for="(tab, i) in tabs"
            :key="tab.tabName"
            class="tab"
            :class="i === activeIndex ? 'active' : ''"
            @click="getModule(tab, i)"
          >
            {{ tab.tabName }}
          </li>
        </ul>
      </div>
      <div class="right">
        <el-row :gutter="15">
          <el-col v-for="item in modules" :key="item.title" :span="item.span">
            <el-card
              class="module-card"
              :class="{ active: item.visible }"
              @click.native="chooseCard(item)"
            >
              <div slot="content">内容</div>
              <i class="icon el-icon-success" />
            </el-card>
            <div class="footer">
              <span>{{ item.title }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import data from './tabs.js'
import { ref, reactive } from '@vue/composition-api'
export default {
  setup(props, { root }) {
    const init = () => {
      dialogVisible.value = true
    }

    const dialogVisible = ref(false)
    const dialogClose = () => {
      activeIndex.value = 0
      chosenLength.value = 0
      tabs.forEach((item) => {
        item.module.forEach((card) => {
          card.visible = false
        })
      })
    }

    const tabs = reactive(data)
    const modules = ref([])
    const activeIndex = ref(-1)
    const getModule = (tab, i) => {
      modules.value = tab.module
      activeIndex.value = i
    }
    getModule(tabs[0], 0)

    const chosenLength = ref(0)
    const chooseCard = (card) => {
      if (chosenLength.value >= 6) {
        return root.$message.info('最多可勾选6个图表')
      }
      card.visible = !card.visible
      if (card.visible) {
        chosenLength.value += 1
      } else {
        chosenLength.value -= 1
      }
    }
    return {
      init,
      dialogVisible,
      dialogClose,
      tabs,
      modules,
      activeIndex,
      getModule,
      chosenLength,
      chooseCard
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/styles/variables';
.content {
  display: flex;
  .left,
  .right {
    height: 600px;
    overflow-y: auto;
    border: 1px solid #eee;
  }
  .right {
    padding: 25px 20px 0;
  }
  .left {
    width: 200px;
    .tab {
      padding: 10px 20px 10px;
      cursor: pointer;
      transition: all 0.3s;
      &.active,
      &:hover {
        background: #ededed;
      }
    }
  }
  .right {
    margin-left: 20px;
    flex: 1;
    .el-card {
      margin-bottom: 10px;
      height: 200px;
    }
    .footer {
      margin-bottom: 20px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
  }
}
.module-card {
  position: relative;
  cursor: pointer;
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    color: $themeColor;
    opacity: 0;
  }
  &:hover,
  &.active {
    .icon {
      opacity: 1;
    }
    &::before {
      background: rgba(0, 0, 0, 0.2);
      transition: all 0.3s;
    }
  }
}
</style>
